<template>
  <div class="find-car page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}">
    <!-- <router-view></router-view> -->
    <!-- <van-nav-bar title="按揭记录" fixed placeholder :border="false">
      <template #left>
        <van-icon name="arrow-left" size="18" @click="goback()" />
      </template>
      <template #right>
        <img
          src="../../assets/image/icon_search.png"
          @click="onClickRight()"
          v-show="isActive"
        />
      </template>
    </van-nav-bar> -->
    
    <navbar :title="title"></navbar>
    <div class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'12vw'}">
    <div class="search-box">
      <form action="/">
        <van-search
          v-model.trim="value"
          shape="round" 
          placeholder="搜索"
          @search="onSearch"
        />
      </form>
    </div>
    <!-- 滚动刷新 -->
    <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
      <div class="mortagae-item-box">
        <div
          class="mortgage_dlist"
          v-for="item in userOrder"
          :key="item.orderId"
          @click="goDetail(item)"
        >
          <find-car-item :orderMsg="item">
            <div class="position">
              <van-icon name="location-o" />
              {{ item.buyCarCity }}
            </div>
          </find-car-item>
        </div>

        <div class="get-more" v-if="getMoreData" @click="getData(1)">
          点击加载更多
        </div>
        <div class="get-more" v-else>没有更多了</div>
      </div>
    <!-- </van-pull-refresh> -->
    </div>
  </div>
</template>

<script>
import findCarItem from "../../components/common/findcaritem.vue";
import { mortgageRecord, getUserIdData } from "./api";
export default {
  components: {
    findCarItem,
  },
  data() {
    return {
      // header栏 => 标题
      title:"按揭记录",
      userOrder: [],
      query: {
        page: 1,
        limit: 20,
        order: "desc", // 降序：desc   升序：asc
        sidx: "update_time",
        contactWay: "",
        carModels: "",
        create_id: "",
      },
      list: [],
      refreshing: false,
      value: "",
      isActive: true,
      isCancel: false,
      getMoreData: true,
      finsh: false,
    };
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    // 搜索
    onSearch() {
      console.log(this.value)
      this.query.contactWay = this.value
      this.query.carModels = this.value
      this.query.userName = this.value
      this.getUserId()
      // this.getData()
    },
    onCancel() {
      this.isCancel = false;
      this.isActive = true;
    },
    onClickRight() {
      this.isActive = false;
      this.isCancel = true;
    },
    goDetail(item) {
      // this.$router.push({
      //  name:'MortageDetails',
      //  query:{
      //   id:item.id
      //  }
      // })
      console.log(item);
    },

    //下拉刷新
    onRefresh() { 
      this.getMoreData = false
      setTimeout(() => {
        this.$toast.success({
          position: 'top',
          message: '刷新成功',
          duration: 1000
        });
        this.refreshing = false;
      }, 1000);
      this.userOrder = [] // 数据置空
      this.getData()
    },
    // 获取数据
    getData(isPage) {
      if(isPage){
        this.query.page = this.query.page+1
      }
      let {limit,page,order,sidx,contactWay,carModels,create_id} = this.query
      mortgageRecord({limit,page,order,sidx,carModels,contactWay,create_id}).then(({data})=>{
        data.list.map(item=>{
          item.carModels =  item.vtdName,
          item.userName = item.createPeople
        })
        let isMore = data.totalPage > data.currPage
        /* if(isMore || (data.totalPage = data.currPage)){
          this.query.page = data.currPage
          this.userOrder = [...this.userOrder,...data.list]
        } */
        // this.getMoreData = isMore
        console.log(isMore)
          console.log('%c [ data.list.length  ]', 'font-size:13px; background:pink; color:#bf2c9f;', data.list.length )
        if (data.list.length >= 20) {
          this.getMoreData = true
        }else{
          this.getMoreData = false 
        }
        this.userOrder.push(...data.list)
      })
      // console.log('现在有',data.length,'条')
    },
    // 获取路由链接上拼接的token值
    getTokenInUrl() {
      var url = window.location.href;
      if (url.indexOf("token") > 0) {
        let getTokenParams = window.location.href.split("token=")[1];
        getTokenParams=getTokenParams.split("&")[0];
        if (getTokenParams.length >= 32) {
          getTokenParams = getTokenParams.substr(0, 32);
          console.log('%c [ getTokenParams ]', 'font-size:13px; background:pink; color:#bf2c9f;', getTokenParams)
          sessionStorage.setItem("token", getTokenParams);
        }
      }
    },
    // 获取用户id
    async getUserId() {
      const res = await getUserIdData()
      this.query.create_id = res.data.userId
      this.userOrder = []
      this.getData()
    }
  },
  created() {
      // 获取屏幕状态栏高度
      this.phoneStatusBarHeight = window.phoneStatusBarHeight
    // 修改页面标题
    document.title = "按揭记录"
    // 获取路由链接上拼接的token值
    this.getTokenInUrl()
    this.getUserId()
  },
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:white");
  },
};
</script>

<style scoped lang="less">
.mortagae-item-box {
  height: calc(~"100vh - 42px");
  overflow-y: auto;
  // background-color: pink;
}
.get-more {
  text-align: center;
  color: #999999;
  margin-top: 0.6rem 0;
  padding: 1rem 0;
  font-size: 12px;
  letter-spacing: 1px;
}
.find-car-item {
  // margin-top: 8px ;
  margin: 0 16px;
  border-bottom: 0.5px solid #eeeeee;
  .position {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    .van-icon {
      color: #f6c401;
    }
  }
}
</style>
<style lang="less">
.van-search__action {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
}
.van-nav-bar .van-icon {
  color: #000000;
}
.van-nav-bar__title {
  font-size: 17px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
}
</style>
